<template>
  <div class="customMenu" ref="customMenuRef">
    <div
      class="title"
      @mouseenter="
        () => {
          isShowUser = false;
          isShowTime = false;
        }
      "
    >
      工站分配人员
    </div>
    <div
      class="row"
      @click="
        () => {
          isShowUser = true;
          isShowTime = false;
        }
      "
      @mouseenter="
        () => {
          isShowUser = true;
          isShowTime = false;
        }
      "
    >
      <div>
        人员选择<span style="margin-left: 10px">{{ userName }}</span>
      </div>
      <el-icon><ArrowRight /></el-icon>
      <div class="row_child" v-if="isShowUser">
        <el-select
          v-model="selectUser"
          placeholder="请选择人员"
          filterable
          style="width: 100%"
          @change="handleUserChange"
        >
          <el-option
            v-for="item in userList"
            :key="item.userId"
            :label="item.userName"
            :value="item.userId"
          >
            <span style="float: left">{{ item.userName }}</span>
            <span
              style="
                float: right;
                color: var(--el-text-color-secondary);
                font-size: 13px;
              "
            >
              {{ item.shiftFullName }}
            </span>
          </el-option>
        </el-select>
      </div>
    </div>
    <div
      class="row"
      @click="
        () => {
          isShowUser = false;
          isShowTime = true;
        }
      "
      @mouseenter="
        () => {
          isShowUser = false;
          isShowTime = true;
        }
      "
    >
      <div>
        时间安排<span style="margin-left: 10px">{{ timeStr }}</span>
      </div>
      <el-icon><ArrowRight /></el-icon>
      <div class="row_child" v-if="isShowTime">
        <el-time-picker
          v-model="selectTimes"
          is-range
          range-separator="-"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="HH:mm"
          @change="handleTimeChange"
        />
      </div>
    </div>
    <div
      class="submit"
      @mouseenter="
        () => {
          isShowUser = false;
          isShowTime = false;
        }
      "
    >
      <div class="btn" @click="handleCancle">取消</div>
      <div class="btn" @click="handleSubmit">确认</div>
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { onMounted, ref } from "vue";

let customMenuRef = ref(null);
const emit = defineEmits(["cancle", "submit"]);

onMounted(() => {
  init();
});

const selectTimes = ref([]);
let isShowTime = ref(false);
let timeStr = ref("");
let isShowUser = ref(false);
let selectUser = ref("");
let userList = ref([
  {
    userId: 1,
    userName: "[001]admin",
    shiftFullName: "白班(08:30-20:30)",
  },
  {
    userId: 2,
    userName: "[002]江涛",
    shiftFullName: "白班(08:30-20:30)",
  },
]);
let userName = ref("");

const init = () => {
  customMenuRef.value.addEventListener("click", (e) => {
    e.stopPropagation();
  });
};

const handleCancle = () => {
  emit("cancle");
};

const handleSubmit = () => {
  if (!timeStr.value) {
    ElMessage.warning("请选择时间");
    return;
  }
  if (!userName.value) {
    ElMessage.warning("请选择人员");
    return;
  }
  let data = {
    startTime: selectTimes.value[0],
    endTime: selectTimes.value[1],
    userName: userName.value,
    userMsg: userList.value.find((user) => user.userId === selectUser.value),
  };
  console.log("选中的数据", data);
  emit("submit", data);
};

const handleTimeChange = (times) => {
  console.log("选择的时间", times);
  timeStr.value = `${times.join("-")}`;
};

const handleUserChange = (userId) => {
  userName.value = userList.value.find(
    (user) => user.userId === userId
  ).userName;
};
</script>

<style lang="scss" scoped>
.customMenu {
  display: none;
  position: absolute;
  background-color: #fff;
  z-index: 1000;
  border-radius: 10px;
  box-shadow: 0 0 15px #ccc;
  .title {
    font-size: 16px;
    font-weight: 700;
    padding: 10px;
  }
  .row {
    position: relative;
    min-width: 150px;
    padding: 5px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .row_child {
      position: absolute;
      right: calc(-370px - 3px);
      top: -10px;
      width: 370px;
      height: 50px;
      border-radius: 10px;
      box-shadow: 0 0 15px #ccc;
      background-color: #fff;
      display: flex;
      align-items: center;
      padding: 10px;
      box-sizing: border-box;
    }
  }
  .row:hover {
    background-color: #ebebeb;
    cursor: pointer;
    transition: background-color 0.5s;
  }
  .submit {
    min-width: 150px;
    padding: 5px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 0 0 10px 10px;
    background-color: #ccc;
    .btn:hover {
      cursor: pointer;
      color: red;
    }
  }
  // .submit:hover {
  //   background-color: #ccc;
  //   // cursor: pointer;
  //   transition: all 0.5s;
  // }
}
</style>
